<template>
  <div class="experiment-apply">
    <div class="page-header">
      <h2>实验申请管理</h2>
      <el-button type="primary" @click="handleNewApplication">新建申请</el-button>
    </div>

    <el-tabs v-model="activeTab" class="apply-tabs">
      <el-tab-pane label="待审批" name="pending">
        <el-table :data="pendingApplications" style="width: 100%">
          <el-table-column prop="id" label="申请编号" width="120" />
          <el-table-column prop="applicant" label="申请人" width="120" />
          <el-table-column prop="equipment" label="申请器材" width="200" />
          <el-table-column prop="applyTime" label="申请时间" width="180" />
          <el-table-column prop="status" label="状态" width="100">
            <template #default="scope">
              <el-tag type="warning">{{ scope.row.status }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template #default="scope">
              <el-button type="success" size="small" @click="handleApprove(scope.row)">
                通过
              </el-button>
              <el-button type="danger" size="small" @click="handleReject(scope.row)">
                拒绝
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="已处理" name="processed">
        <el-table :data="processedApplications" style="width: 100%">
          <el-table-column prop="id" label="申请编号" width="120" />
          <el-table-column prop="applicant" label="申请人" width="120" />
          <el-table-column prop="equipment" label="申请器材" width="200" />
          <el-table-column prop="applyTime" label="申请时间" width="180" />
          <el-table-column prop="status" label="状态" width="100">
            <template #default="scope">
              <el-tag :type="scope.row.status === '已通过' ? 'success' : 'danger'">
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="processTime" label="处理时间" width="180" />
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <el-dialog
      v-model="dialogVisible"
      title="新建实验申请"
      width="500px"
    >
      <el-form :model="applicationForm" label-width="100px">
        <el-form-item label="申请器材">
          <el-select v-model="applicationForm.equipment" placeholder="请选择器材">
            <el-option
              v-for="item in equipmentOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="申请数量">
          <el-input-number v-model="applicationForm.quantity" :min="1" />
        </el-form-item>
        <el-form-item label="申请原因">
          <el-input
            v-model="applicationForm.reason"
            type="textarea"
            rows="3"
            placeholder="请输入申请原因"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitApplication">
            提交申请
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const activeTab = ref('pending')
const dialogVisible = ref(false)

const pendingApplications = ref([
  {
    id: 'AP001',
    applicant: '张三',
    equipment: '显微镜',
    applyTime: '2024-12-11 09:30',
    status: '待审批'
  },
  {
    id: 'AP002',
    applicant: '李四',
    equipment: '烧杯',
    applyTime: '2024-12-11 10:15',
    status: '待审批'
  }
])

const processedApplications = ref([
  {
    id: 'AP003',
    applicant: '王五',
    equipment: '天平',
    applyTime: '2024-12-10 14:20',
    processTime: '2024-12-10 15:30',
    status: '已通过'
  }
])

const applicationForm = ref({
  equipment: '',
  quantity: 1,
  reason: ''
})

const equipmentOptions = ref([
  { value: '显微镜', label: '显微镜' },
  { value: '烧杯', label: '烧杯' },
  { value: '天平', label: '天平' }
])

const handleNewApplication = () => {
  dialogVisible.value = true
}

const submitApplication = () => {
  ElMessage.success('申请提交成功')
  dialogVisible.value = false
}

const handleApprove = (row) => {
  ElMessageBox.confirm(
    '确认通过该申请？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'success'
    }
  ).then(() => {
    ElMessage.success('申请已通过')
  })
}

const handleReject = (row) => {
  ElMessageBox.confirm(
    '确认拒绝该申请？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    ElMessage.warning('申请已拒绝')
  })
}
</script>

<style scoped>
.experiment-apply {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
}

.apply-tabs {
  margin-top: 20px;
}
</style>

